<template>
  <div class="ecology-detail-page">
    <div class="ecology-detail">
      <div class="ecology-detail-top f f-jb">
        <div class="ecology-detail-img">
          <el-carousel height="263px" indicator-position="outside">
            <el-carousel-item v-for="(i, k) in info.image" :key="k">
              <div class="f f-jc f-ac" style="height: 100%">
                <img :src="publicSrc(i)" draggable="false" style="max-width: 173px; max-height: 260px; margin: auto" />
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="ecology-detail-info">
          <Title :title="info.name" color="#000" size="36" bold="700" left="0" :line-height="60" />
          <div class="ecology-detail-content">
            <div class="line-8">
              {{ info.synopsis }}
            </div>
            <div class="ecology-btn" @click="handleSeek">立即咨询</div>
          </div>
        </div>
      </div>
      <div class="ecology-detail-bottom">
        <Title title="产品参数" color="#000" size="14" bold="700" left="0" class="mt20" />
        <div class="ecology-detail-content">{{ info.parameter }}</div>
        <Title title="产品介绍" color="#000" size="14" bold="700" left="0" class="mt20" />
        <div v-html="info.introduce" class="ecology-detail-content" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { publicSrc } from "@/utils/common";
  import { productDetail } from "@/api/ecology";
  import Title from "@/components/Title/index.vue";

  const route = useRoute();
  const router = useRouter();

  const info = ref < any > ({}); // 产品详情

  // 获取详情
  const getInfo = () => {
    const id = route.query.id;
    if (id) {
      productDetail(id).then((res: any) => {
        if (res.code === 200) {
          let data = res.data;
          data.image = data.image ? data.image.split(",") : [];
          info.value = data;
        }
      });
    }
  };

  // 咨询
  const handleSeek = () => {
    // 跳转到咨询页面或打开咨询对话框
    router.push({
      path: '/pc/contact',
      query: {
        product: info.value.name
      }
    });
  };

  onMounted(() => {
    getInfo();
  });
</script>

<style lang="scss" scoped>
  .ecology-detail-page {
    padding: 20px;
    background: #fff;
    min-height: 100vh;
    padding-top: 132px;
    /* 增加顶部内边距，为导航栏留出空间 */
  }

  .ecology-detail {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    &-top {
      height: 318px;
      border-bottom: 1px solid #e5e5e5;
      margin-bottom: 40px;
      display: flex;
      justify-content: space-between;

      .ecology-detail-img {
        height: 293px;
        width: 260px;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .ecology-detail-info {
        width: 738px;
        position: relative;
      }
    }

    &-bottom {
      width: 100%;
    }

    &-content {
      font-size: 14px;
      line-height: 19.6px;
      color: #383838;
      margin-top: 10px;

      .ecology-btn {
        position: absolute;
        bottom: 25px;
        width: 126px;
        height: 47px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #4580dd;
        border-radius: 4px;
        transition: all 0.3s;
        box-shadow: 0 2px 6px rgba(69, 128, 221, 0.3);

        &:hover {
          cursor: pointer;
          background-color: #4174c5;
          transform: translateY(-2px);
          box-shadow: 0 4px 8px rgba(69, 128, 221, 0.4);
        }
      }
    }
  }

  :deep(.el-carousel__indicators) {
    bottom: -25px;

    .el-carousel__button {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #dcdfe6;

      &:hover {
        background-color: #4580dd;
      }
    }

    .is-active .el-carousel__button {
      background-color: #4580dd;
    }
  }
</style>